<template>
	<div style="width: 100%;height: 900px; ">
		<div class="main">
			<div class="one">
				<div>
					<el-icon :size="40">
						<SvgIcon iconName="icon-user-copy" />
					</el-icon>
				</div>
				<div style="width: 100%;">
					<div style="margin-bottom: 20px; text-align: right;width: 100%;" >访问数</div>
					<div style=" text-align: right;width: 100%;" >{{userCount}}</div>
				</div>
			</div>
			
			<div class="two">
				<div>
					<el-icon :size="40">
						<SvgIcon iconName="icon-money-copy" />
					</el-icon>
				</div>
				<div style="width: 100%;">
					<div style="margin-bottom: 20px; text-align: right;width: 100%;" >项目数</div>
					<div style=" text-align: right;width: 100%;" >一共有{{Price}}个项目</div>
					<div style=" text-align: right;width: 100%;" >已完成{{Project}}个项目</div>
				</div>
			</div>
			
			<div class="three">
				<div>
					<el-icon :size="40">
						<SvgIcon iconName="icon-shop-car-copy" />
					</el-icon>
				</div>
				<div style="width: 100%;">
					<div style="margin-bottom: 20px; text-align: right;width: 100%;" >订单数</div>
					<div style=" text-align: right;width: 100%;" >{{Order}}</div>
				</div>
			</div>
			
			<div class="four">
				<div>
					<el-icon :size="40">
						<SvgIcon iconName="icon-time1" />
					</el-icon>
				</div>
				<div style="width: 100%;">
					<div style="margin-bottom: 20px; text-align: right;width: 100%;" >当前时间</div>
					<div style=" text-align: right;width: 100%;" >{{utils.msToTime(dtetime)}}</div>
				</div>
			</div>
			
			
		</div>

		<div id="enqiu" ref="enqiu" style="width: 100%;height:300px;"></div>
		<div id="echartsRef" ref="echartsRef" style="width: 100%;height:300px;"></div>
	</div>
</template>


<script setup lang="ts">
	import echartsapi from '@/api/chartapi';
	import * as echarts from 'echarts';
	import {
		onMounted, ref,
		watch
	} from 'vue';
	import { useWindowSize } from '@vueuse/core';
	import utils from '@/utils/utils'; 
	import comeapi from '@/api/comeapi'
	const dtetime = ref(new Date);
	const userCount=ref()
	const Price=ref()
	const Project=ref()
	const Order=ref()

	const windsize = useWindowSize() 
	const enqiu = ref<any>(null)
	const echartsRef = ref<any>(null) 
	const xdata = ref<any[]>([])
	const legenddata = ref<any[]>([]);
	const seriesdata = ref<any[]>([]); 
	const qvdata = ref<any[]>([]);
	const qvlegenddata = ref<any[]>([]); 
	const ooppp = ref();

	const qvinit = () => { 
		var myChart = echarts.init(enqiu.value)  
		let option : any = null;
		echartsapi.DictNameNum().then(res => {
			let data = res.data;
			data.forEach((val : any) => {
				qvdata.value.push(val.DictName)
				qvlegenddata.value.push({
					value: val.num, name: val.DictName
				})
			});
			option = {
				title: {
					text: '部门任职',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} : {c} ({d}%)'
				},
				label: {
					formatter: '{b}: {@2012} ({d}%)'
				},
				legend: {
					bottom: 10,
					left: 'center',
					data: qvdata.value
				},
				series: [
					{
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						selectedMode: 'single',
						data: qvlegenddata.value
					}
				]
			}
			ooppp.value = option
			myChart.setOption(option);
			//console.log(ooppp.value)
			option = null;
		})
		// 设置图表的配置

	}
	const setdata = () => {
		echartsapi.TimeDictNameNum().then(res => {
			let data = res.data;

			data.forEach((val : any) => {
				if (!xdata.value.includes(val.weedayname)) {
					xdata.value.push(val.weedayname)
				}
				if (!legenddata.value.includes(val.DictName)) {
					legenddata.value.push(val.DictName);
				}
				var sitem = seriesdata.value.find(s => s.name == val.DictName)
				if (sitem == undefined) {
					seriesdata.value.push(
						{
							name: val.DictName,
							type: 'line',
							smooth: true,
							seriesLayoutBy: 'row',
							emphasis: { focus: 'series' },
							data: [val.num]
						}
					)
				} else {
					sitem.data.push(val.num)
				}
			})
			init();
		})
	}
	const init = () => { 
		var myChart = echarts.init(echartsRef.value)//document.getElementById("echartsRef"));
		let option = null;
		option = {
			title: {
				text: '用户注册图'
			},
			label: {

				show: true,
				position: 'top'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#283b56'
					}
				}
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack'] },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			legend: {
				data: legenddata.value
			},
			xAxis: {
				type: 'category',
				axisTick: { show: false },
				data: xdata.value
			},
			yAxis: {

			},
			series: seriesdata.value
		}
		// 设置图表的配置
		myChart.setOption(option);
		option = null
	}

	watch(windsize.width, () => {

	})
	
	const one=()=>{
		comeapi.GetUser().then(res=>{
			userCount.value = res.data
		})
	}
	
	const two=()=>{
		comeapi.GetPrice().then(res=>{
			Price.value=res.data			
		})
		comeapi.GetProject().then(res=>{
			Project.value=res.data			
		})
		//...
	}
	
	const three=()=>{
		comeapi.GetOrder().then(res=>[
			Order.value=res.data
		])
	}

	onMounted(() => {
		let dd = setInterval(() => {
			dtetime.value = new Date()
		}, 1000);
		setdata()
		qvinit()
		one()
		two()
		three()
	});
</script>
<style scoped>
	.one{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 24%;
		height: 70px;
		background-color: white;
		box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 10px;
		margin: 10px;
	}
	.two{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 24%;
		height: 70px;
		background-color: white;
		box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 10px;
		margin: 10px;
	}
	.three{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 24%;
		height: 70px;
		background-color: white;
		box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 10px;
		margin: 10px;
	}
	.four {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 24%;
		height: 70px;
		background-color: white;
		box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 10px;
		margin: 10px;
	}

	.main {
		display: flex;
		align-items: center;
		width: 100%;  
	}
</style>